<template>
	<div class="content">
		<p style="height: 20rpx;"></p>
		<div class="list_box" v-if="list.length">
			<!-- <div class="list">
				<div class="tx">
					<img src="/static/logo.png" alt="">
					<div class="name_box">
						<p class="name">西安财务</p>
						<p class="time">16小时前</p>
					</div>
				</div>
				<div class="nr">
					垃圾安康园区从8月份注销到现在，注销不掉，一直是风险户解除也解除不掉。给人家提供资料，该提供的都提供了，最后处理不掉。现在群里边儿，别人发消息都回，碰到我们两个风险户不给回复。安康垃圾园区，当时说好的全包注销，现在注销也注销不掉，风险户也解除不掉...
				</div>
				<div class="anniu">
					<p><img src="/static/exposure-icon1.png" alt="">去分享</p>
					<p><img src="/static/exposure-icon2.png" alt="">34</p>
					<p><img src="/static/exposure-icon3.png" alt="">9</p>
				</div>
			</div> -->
			<div class="list" v-for="(item,index) in list" :key="index" @click="toXq(item.id)">
				<div class="tx">
					<img :src="item.avatar?item.avatar:'/static/mr_tx.png'" alt="">
					<div class="name_box">
						<p class="name">{{item.memberUserName}}</p>
						<p class="time">{{item.createTime}}</p>
					</div>
				</div>
				<div class="nr">
					{{item.content}}
				</div>
				<div class="img_list" v-if="item.pictureList.length">
					<p @click.stop="previewImg(item.pictureList,child)" class="img" v-for="(child,i) in item.pictureList">
						<u-image mode="aspectFill" width="220rpx" height="220rpx" :src="child"  :lazy-load="true"></u-image>
					</p>
				</div>
				<div class="anniu">
					
					<p @click.stop="">
						<button class="anniu" open-type="share">
							<img src="/static/exposure-icon1.png" alt="">去分享
						</button>
					</p>
					<p @click="toXq(item.id)"><img src="/static/exposure-icon2.png" alt="">{{item.commentsTotal}}</p>
					<p @click.stop="dianzan(item,index)" :style="{color:item.isLike?'#FF4441':'#999999'}">
						<img v-if="!item.isLike" src="/static/exposure-icon3.png" alt="">
						<img v-else src="/static/exposure-icon3hover.png" alt="">
						{{item.likeNum?item.likeNum:0}}
					</p>
				</div>
			</div>
		</div>
		<div class="no_data" v-else>
			<img src="/static/no-data.png" alt="">
			<p>暂无内容</p>
		</div>
		<div class="b_anniu">
			<p @click="clickReleasePop">发布</p>
		</div>

		<!-- 发布 -->
		<u-popup @close="closeRelease" closeOnClickOverlay safeAreaInsetBottom :round="12" :show="releaseShow" mode="bottom">
			<release-pop @close="closeRelease" :isRefresh="isRefresh" :bgName="bgName" :memberId="memberId"></release-pop>
		</u-popup>
	</div>
</template>

<script>
	import { mapState } from 'vuex'
	import { getTimeUtils1 } from '@/utils/utils.js'
	import api from '@/api';
	import ReleasePop from './components/ReleasePop.vue'
	export default {
		components: {
			ReleasePop,
		},
		data() {
			return {
				releaseShow:false,
				isRefresh:0,
				param:{
					pageNum:0,
					pageSize:10
				},
				list:[],
				isPreview:false,
				shareUserId:'',
				bgName:'',
				memberId:''
			}
		},
		onShow(){
			if(!this.isPreview){
				this.getList(true)
			}
			this.isPreview = false
		},
		onLoad(options) {
			console.log(options)
			if(options.shareUserId){
				this.shareUserId = options.shareUserId
			}
			if(options.bgName){
				this.bgName = options.bgName
				this.memberId = options.memberId
				this.releaseShow = true
			}
		},
		computed: {
			...mapState({
				userId: state => state.user.userId,
				token: state => state.user.token,
			})
		},
		methods: {

			dianzan(item,index){
				if(!this.token){
					uni.navigateTo({
						url: `/pages/authorization/index?shareUserId=${this.shareUserId}`
					});
					return
				}
				if(item.isLike){
					api.user.message_likes({messageId:item.id}).then(res=>{
						if(res.code == 200){
							this.list[index].isLike = false
							this.list[index].likeNum--
						}
					})
				}else{
					api.user.message_likes({messageId:item.id}).then(res=>{
						if(res.code == 200){
							this.list[index].isLike = true
							this.list[index].likeNum++
						}
					})
				}
			},

			previewImg(imgList,imgurl) {
				this.isPreview = true
				uni.previewImage({
					current: imgurl, // 当前显示图片的http链接
					urls: imgList // 需要预览的图片http链接列表
				});
			},

			toXq(id){
				if(!this.token){
					uni.navigateTo({
						url: `/pages/authorization/index?shareUserId=${this.shareUserId}`
					});
					return
				}
				uni.navigateTo({
					url: `/pages/exposure/xq/index?id=${id}`
				});
			},

			getList(state){
				api.user.message_page(this.param).then(res=>{
					if(res.code == 200){
						uni.hideLoading();
						this.loadingShow = false
						if(this.param.pageNum && !res.data.list.length){
							this.$toast('已经到底了~')
							return
						}
						if(state){
							this.list = []
						}
						res.data.list.map(item=>{
							item.createTime = getTimeUtils1(item.createTime)
							if(item.pictureList){
								item.pictureList = item.pictureList.split(",");
							}
						})
						this.list = this.list.concat(res.data.list)
					}
				})
			},
			
			// 发布信息弹窗
			clickReleasePop(){
				if(!this.token){
					uni.navigateTo({
						url: `/pages/authorization/index?shareUserId=${this.shareUserId}`
					});
					return
				}
				this.isRefresh = 1
				this.releaseShow = true
			},

			// 关闭发布弹窗
			closeRelease(e){
				if(e){
					uni.showModal({
						title: '提示',
						content: '发布成功，等待审核！',
						showCancel: false,
						confirmText: '确定',
						success:(res)=>{
							if (res.confirm) {
								this.getList(true)
							} 
						},
					});
				}
				this.releaseShow = false
				this.isRefresh = 0
			},
		},
		onReachBottom(){
			this.param.pageNum++
			this.$showLoading('加载中...')
			this.getList()
			console.log('到底了')
		},
		onShareAppMessage() {
			return {
				title: '免费用万人接单群',
				path: `/pages/exposure/index?shareUserId=${this.userId}`
			}
		},
	}
</script>

<style lang="scss" scoped>
	.content{
		min-height: 100vh;
		background: #f7f7f7;
		.list_box{
			.list{
				padding:30rpx 30rpx 0 30rpx;
				background: #fff;
				margin-bottom:20rpx;
				.tx{
					display: flex;
					img{
						width: 80rpx;
						height: 80rpx;
						border-radius: 50%;
						margin-right:20rpx;
					}
					.name_box{
						display: flex;
						flex-direction:column;
						justify-content: space-around;
						.name{
							font-size: 30rpx;
							color: #333333;
						}
						.time{
							color: #999999;
							font-size: 26rpx;
						}
					}
				}
				.nr{
					padding:24rpx 0;
					font-size:28rpx;
					color:#333;
					line-height: 46rpx;
				}
				.img_list{
					padding-bottom:10rpx;
					.img{
						width: 110px;
						height: 110px;
						margin:0 14rpx 14rpx 0;
						display: inline-block;
						&:nth-child(3n){
							margin-right:0;
						}
					}
				}
				.anniu{
					display: flex;
					align-items: center;
					justify-content: space-around;
					height: 76rpx;
					border-top:1px solid #EEEEEE;
					font-size: 26rpx;
					color: #999999;
					p{
						display: flex;
						align-items: center;
						button{
							background: none;
							border:none;
							padding:none;
							&::after{
								border:none;
							}
						}
					}
					img{
						width: 36rpx;
						height: 36rpx;
						margin-right:6rpx;
					}
				}
			}
		}
		.b_anniu{
			width: 100%;
			position: fixed;
			bottom:70rpx;
			z-index: 10;
			p{
				width: 280rpx;
				height: 96rpx;
				line-height: 96rpx;
				border-radius: 100rpx;
				background: linear-gradient(270deg, #62CE73 0%, #23AC39 100%);
				font-size: 32rpx;
				font-weight: 500;
				color: #FFFFFF;
				text-align: center;
				margin: 0 auto;
			}
		}
		.no_data{
			text-align: center;
			padding-top:100rpx;
			img{
				width: 320rpx;
				height: 320rpx;
			}
			p{
				font-size: 24rpx;
				color: #999999;
				margin-top:-40rpx;
			}
		}
	}
</style>
